<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
import { useHeaderStore } from '@/stores/modudels/headerStore'
const headerStore = useHeaderStore()

import { useRoute } from 'vue-router'
import { onBeforeMount, ref } from 'vue'

const route = useRoute()
const activedIndex = ref('')

onBeforeMount(() => {
  activedIndex.value = route.path
})
</script>

<template>
  <div class="aside_container">
    <div class="aside_logo">
      <span>后台管理系统</span>
      <img src="../../assets/imgs/logo.png" />
    </div>
    <div class="aside_menu">
      <el-menu router :collapse="headerStore.isCollapse" :default-active="activedIndex">
        <el-menu-item index="/">
          <el-icon :size="20">
            <Edit />
          </el-icon>
          <span>主页</span>
        </el-menu-item>
        <el-menu-item>
          <el-icon :size="20">
            <Edit />
          </el-icon>
          <span>数据统计</span>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon :size="20">
              <Edit />
            </el-icon>
            <span>商品管理</span>
          </template>

          <el-menu-item index="/product/brand"
            ><el-icon :size="20">
              <Edit />
            </el-icon>
            <span>品牌管理</span></el-menu-item
          >

          <el-menu-item index="/product/attr"
            ><el-icon :size="20">
              <Edit />
            </el-icon>
            <span>属性管理</span></el-menu-item
          >

          <el-menu-item index="/product/spu"
            ><el-icon :size="20">
              <Edit />
            </el-icon>
            <span>SPU管理</span></el-menu-item
          >

          <el-menu-item index="/product/purchase"
            ><el-icon :size="20">
              <Edit />
            </el-icon>
            <span>团购管理</span></el-menu-item
          >

          <el-menu-item index="/product/sku"
            ><el-icon :size="20">
              <Edit />
            </el-icon>
            <span>Sku管理</span></el-menu-item
          >
        </el-sub-menu>

        <el-sub-menu>
          <template #title
            ><el-icon :size="20">
              <Edit />
            </el-icon>
            <span>权限管理</span>
          </template>

          <el-menu-item index="/acl/user"
            ><el-icon :size="20">
              <Edit />
            </el-icon>
            <span>用户管理</span></el-menu-item
          >

          <el-menu-item index="/acl/role"
            ><el-icon :size="20">
              <Edit />
            </el-icon>
            <span>角色管理</span></el-menu-item
          >

          <el-menu-item index="/acl/menu"
            ><el-icon :size="20">
              <Edit />
            </el-icon>
            <span>菜单管理</span></el-menu-item
          >
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
</template>

<style scoped lang="scss">
.aside_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .aside_logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 100px;
      padding: 5px;
    }
    span {
      font-size: 25px;
      font-weight: 600;
      color: rgb(159, 179, 46);
      padding: 5px;
      line-height: 1.1em;
    }
  }
}
</style>
